<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>超具科技感的SVG消息提醒动画按钮</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">

</head>
<style>
	* {
		box-sizing: border-box;
	}
	
	body,
	html {
		overflow: hidden;
	}
	
	body {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100vw;
		height: 100vh;
		margin: 0;
		background: black;
		color: #ccc;
	}
	
	button {
		position: relative;
		width: 100px;
		height: 100px;
		background-image: linear-gradient(
			120deg,
			#7afffb,
			#79fcff,
			#75eaff,
			#6eccff,
			#67a4ff,
			#5f73ff,
			#7156ff,
			#9b4eff,
			#c547ff,
			#e940ff,
			#ff3cfc,
			#ff3bf2
		);
		background-position: top left;
		background-size: 100%;
		box-shadow: 0px 0px 400px rgba(255, 59, 242, 1),
			0px 0px 200px rgba(255, 59, 242, 0.75), 0px 0px 100px rgba(255, 59, 242, 0.5),
			0px 0px 50px rgba(255, 59, 242, 0.35), 0px 0px 25px rgba(255, 59, 242, 0.2);
		border-radius: 100%;
		border: none;
		margin: 0;
		padding: 15px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.3s ease;
	}
	
	button:hover {
		box-shadow: 0px 0px 400px rgba(122, 255, 251, 1),
			0px 0px 200px rgba(122, 255, 251, 0.75),
			0px 0px 100px rgba(122, 255, 251, 0.5), 0px 0px 50px rgba(122, 255, 251, 0.35),
			0px 0px 25px rgba(122, 255, 251, 0.2);
		padding: 20px;
		background-size: 180%;
		transition: all 0.3s ease;
	}
	
	button:active {
		transform: scale(0.9);
		transition: all 0.05s ease;
	}
	
	button::before {
		position: absolute;
		width: calc(100% + 20px);
		height: calc(100% + 20px);
		border: 1px solid rgba(255, 59, 242, 0.8);
		border-radius: 100%;
		pointer-events: none;
		content: "";
		transition: all 0.3s ease;
	}
	
	button:hover::before {
		border: 1px solid rgba(122, 255, 251, 0.6);
		width: calc(100% + 40px);
		height: calc(100% + 40px);
		transition: all 0.3s ease;
	}
	
	button:active::before {
		width: calc(100% + 20px);
		height: calc(100% + 20px);
		transition: all 0.07s ease;
	}
	
	button::after {
		position: absolute;
		width: calc(100% + 40px);
		height: calc(100% + 40px);
		border: 2px dashed rgba(255, 59, 242, 0.4);
		box-shadow: 0px 0px 100px rgba(122, 255, 251, 0.1);
		border-radius: 100%;
		pointer-events: none;
		animation: rotate 30s linear infinite;
		content: "";
		transition: all 0.3s ease;
	}
	
	@keyframes rotate {
		to {
			transform: rotateZ(-360deg);
		}
	}
	
	button:hover::after {
		border: 2px dashed rgba(122, 255, 251, 0.3);
		width: calc(100% + 80px);
		height: calc(100% + 80px);
		transition: all 0.3s ease;
	}
	
	button:active::after {
		width: calc(100% + 40px);
		height: calc(100% + 40px);
		transition: all 0.07s ease;
	}
	
	button > svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		mix-blend-mode: overlay;
		transition: all 0.3s ease;
		z-index: 1;
	}
	
	button i {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	button i svg {
		position: relative;
		width: 100%;
		height: auto;
		filter: drop-shadow(0px 0px 5px white);
		mix-blend-mode: overlay;
	}
	
	button:hover i svg {
		animation: shake 0.5s linear infinite;
	}
	
	@keyframes shake {
		0% {
			transform: rotate(0deg);
		}
		25% {
			transform: rotate(15deg);
		}
		75% {
			transform: rotate(-15deg);
		}
	}
	
	button span {
		position: absolute;
		top: -7px;
		right: -11px;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(5px);
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		z-index: 2;
	}
	
	button:hover span {
		background-color: #333;
		transition: all 0.3s ease;
	}
	
	button span p {
		font: normal normal 400 14pt / 2cap "Roboto Mono", monospace;
		color: #ccc;
		margin: 0;
		position: relative;
		left: 1px;
	}
	
	button span svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	aside {
		position: absolute;
		font: normal normal 900 14pt / 2cap "Architects Daughter", cursive;
		bottom: 10%;
		color: #777;
		transition: all 0.3s ease;
	}
	
	button:hover ~ aside {
		opacity: 0;
		transition: all 0.3s ease;
	}
	
	@media (max-height: 270px) {
		aside {
			display: none;
		}
	}
</style>
<body>
<!-- partial:index.partial.html -->
<button type="button">
	<i>
		<svg viewBox="0 0 56 50" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M9.3999 44.0002V39.2102C9.3999 39.2102 14.2299 38.9702 14.2299 34.3802V19.1002C14.2299 19.1002 14.1799 6.43018 27.8599 6.43018C39.9199 6.43018 42.8599 13.4302 42.8599 18.6402V35.2302C42.8599 35.2302 42.4999 39.2302 47.6599 39.2302V44.0002H9.3999Z" stroke="black" stroke-width="3" stroke-dasharray="0,0,109.7099609375,27.427490234374993">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.4705882352941178s" values="0,0,109.7099609375,27.427490234374993; 
          0,27.427490234374993,109.7099609375,0; 
          109.7099609375,27.427490234374993,0,0" keyTimes="0; 0.19999999999999996; 1"></animate>
			</path>
			<path d="M32.24 6.78998V5.46998C32.24 4.47807 31.846 3.52679 31.1446 2.8254C30.4432 2.12402 29.4919 1.72998 28.5 1.72998C27.5081 1.72998 26.5568 2.12402 25.8554 2.8254C25.154 3.52679 24.76 4.47807 24.76 5.46998V6.66998" stroke="black" stroke-width="3" stroke-dasharray="0,0,11.415697479248047,2.853924369812011">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.4705882352941178s" values="0,0,11.415697479248047,2.853924369812011; 
          0,2.853924369812011,11.415697479248047,0; 
          11.415697479248047,2.853924369812011,0,0" keyTimes="0; 0.19999999999999996; 1"></animate>
			</path>
			<path d="M32.33 44C32.275 45.1738 31.77 46.2812 30.92 47.0925C30.0699 47.9037 28.94 48.3563 27.7649 48.3563C26.5899 48.3563 25.46 47.9037 24.6099 47.0925C23.7599 46.2812 23.2549 45.1738 23.2 44" stroke="black" stroke-width="3" stroke-dasharray="0,0,11.143664550781251,2.785916137695312">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.4705882352941178s" values="0,0,11.143664550781251,2.785916137695312; 
          0,2.785916137695312,11.143664550781251,0; 
          11.143664550781251,2.785916137695312,0,0" keyTimes="0; 0.19999999999999996; 1"></animate>
			</path>
			<path d="M46.5 26.4902C47.2034 26.7872 47.8233 27.2522 48.3053 27.8444C48.7874 28.4366 49.1168 29.138 49.2649 29.887C49.4129 30.6361 49.375 31.4101 49.1545 32.1411C48.934 32.8721 48.5376 33.538 48 34.0802" stroke="black" stroke-width="3" stroke-dasharray="0,0,7.293882751464844,1.8234706878662106">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.4705882352941178s" values="0,0,7.293882751464844,1.8234706878662106; 
          0,1.8234706878662106,7.293882751464844,0; 
          7.293882751464844,1.8234706878662106,0,0" keyTimes="0; 0.19999999999999996; 1"></animate>
			</path>
			<path d="M49.3 23C50.5062 23.5068 51.5697 24.3017 52.3973 25.315C53.2249 26.3283 53.7913 27.5292 54.0469 28.8123C54.3026 30.0954 54.2396 31.4216 53.8636 32.6747C53.4875 33.9279 52.8099 35.0696 51.89 36" stroke="black" stroke-width="3" stroke-dasharray="0,0,12.497595977783204,3.1243989944458">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.4705882352941178s" values="0,0,12.497595977783204,3.1243989944458; 
          0,3.1243989944458,12.497595977783204,0; 
          12.497595977783204,3.1243989944458,0,0" keyTimes="0; 0.19999999999999996; 1"></animate>
			</path>
			<path d="M9.99992 26.7402C9.29398 27.0343 8.67126 27.4976 8.1867 28.0892C7.70214 28.6808 7.37062 29.3826 7.22141 30.1327C7.07219 30.8827 7.10985 31.6579 7.33108 32.39C7.5523 33.122 7.95028 33.7884 8.48992 34.3302" stroke="black" stroke-width="3" stroke-dasharray="0,0,7.304747772216797,1.8261869430541988">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.4705882352941178s" values="0,0,7.304747772216797,1.8261869430541988; 
          0,1.8261869430541988,7.304747772216797,0; 
          7.304747772216797,1.8261869430541988,0,0" keyTimes="0; 0.19999999999999996; 1"></animate>
			</path>
			<path d="M7.17011 23.2598C5.96393 23.7666 4.90046 24.5615 4.07288 25.5748C3.2453 26.5881 2.67887 27.7889 2.42324 29.072C2.1676 30.3552 2.23056 31.6814 2.6066 32.9345C2.98263 34.1876 3.66026 35.3294 4.58011 36.2598" stroke="black" stroke-width="3" stroke-dasharray="0,0,12.497511291503907,3.1243778228759758">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="1.4705882352941178s" values="0,0,12.497511291503907,3.1243778228759758; 
          0,3.1243778228759758,12.497511291503907,0; 
          12.497511291503907,3.1243778228759758,0,0" keyTimes="0; 0.19999999999999996; 1"></animate>
			</path>
		</svg>
	</i>
	<span>
		<p>
			3
		</p>
		<svg viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
			<circle cx="37" cy="37" r="36" stroke="#7afffb" stroke-width="2" stroke-dasharray="0,0,0,0,0,225.8292694091797">
				<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="5.43653642049062s" values="0,0,0,0,0,225.8292694091797; 
          0,0,0,45.59790218816986,89.0355628446701,91.19580437633972; 
          0,0,75.27642313639323,0,150.55284627278647,225.8292694091797; 
          0,0,150.55284627278647,0,75.27642313639323,225.8292694091797; 
          0,0,188.19105784098306,37.63821156819662,0,0; 
          0,225.8292694091797,0,75.27642313639323,0,225.8292694091797" keyTimes="0; 0.16666666666666666; 0.3333; 0.6666; 0.8333; 1" begin="0.935907495683864s"></animate>
			</circle>
		</svg>
	</span>
	<svg viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
		<circle cx="37" cy="37" r="36" stroke="black" stroke-width="2" stroke-dasharray="0,0,0,0,0,225.8292694091797">
			<animate attributeType="XML" attributeName="stroke-dasharray" repeatCount="indefinite" dur="5.43653642049062s" values="0,0,0,0,0,225.8292694091797; 
          0,0,0,45.59790218816986,89.0355628446701,91.19580437633972; 
          0,0,75.27642313639323,0,150.55284627278647,225.8292694091797; 
          0,0,150.55284627278647,0,75.27642313639323,225.8292694091797; 
          0,0,188.19105784098306,37.63821156819662,0,0; 
          0,225.8292694091797,0,75.27642313639323,0,225.8292694091797" keyTimes="0; 0.16666666666666666; 0.3333; 0.6666; 0.8333; 1" begin="0.935907495683864s"></animate>
		</circle>
	</svg>
</button>

<aside>
	hover & click me
</aside>
<!-- partial -->
  
</body>
</html>
